<template>
	<view class="">
		<view class="form-body">
			<u--form :model="formData" ref="mForm" labelWidth="180" errorType="toast" >
				<u-form-item label="方案名称" prop="schemeName" borderBottom required>
					<u-input v-model="formData.schemeName" border="none" placeholder="请输入" inputAlign="right"/>
				</u-form-item>
				<view class="">
					<view class="fsize-30 padding-20">方案列表</view>
					<view class="fsize-28 line-gray pb-20 pl-20 pr-20" v-for="(fa, fas) in formData.items" :key="fas">
						<u-row gutter="10">
							<u-col span="4">
								<view class="">
									<span>最小销售金额</span>
									<u-input v-model="fa.amountMin" type="digit" border="bottom" placeholder="请输入"/>
								</view>
							</u-col>
							<u-col span="4">
								<view class="">
									<span>最大销售金额</span>
									<u-input v-model="fa.amountMax" type="digit" border="bottom" placeholder="请输入"/>
								</view>
							</u-col>
							<u-col span="4">
								<view class="text-align-right flex align-center">
									<view class="mr-10">
										<span>分红比例</span>
										<u-input v-model="fa.bonusRatio" type="digit" border="bottom" placeholder="请输入" inputAlign="right">
											<text slot="suffix">%</text>
										</u-input>
									</view>
									<u-tag text="删除" bgColor="#e54d42" borderColor="#e54d42" @click="onDel(fas)"></u-tag>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</u--form>
		</view>
		<view class="pl-100 pr-100 mt-20"><u-button text="添加方案列表" @click="addItms" /></view>
		<view class="mt-100 pl-40 pr-40">
			<view>
				<u-button type="primary" color="#e54d42" text="提交" @click="submit" size="large" />
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				formData: {
					id:0,
					schemeName: '',
					itemType: 2,
					items: []
				},
				rules: {
					schemeName:[{
						type:'string',
						required: true, 
						message: '管理业绩提成方案名称不能为空',
						trigger: ['change','blur'],
					}],
				}
			}
		},
		onLoad(option) {
			let that = this
			if (option.id) {
				uni.setNavigationBarTitle({ title: '编辑绩提成方案', })
				this.isEdit = true
				this.getEdit(option.id)
			}else {
				uni.setNavigationBarTitle({ title: '添加业绩提成方案', })
			}
		},
		onReady() {
			this.$refs.mForm.setRules(this.rules)
		},
		methods: {
			addItms(){
				this.formData.items.push({
					amountMin: 0,
					amountMax: 0,
					bonusRatio: 0
				})
			},
			getEdit(id) {
				this.$reqJsonPost('GetBonusSchemeGetEdit', { id: id, itemType: 2 }).then(res => {
					this.formData = res.data
				})
			},
			submit() {
				this.$refs.mForm.validate().then(res=>{
					if (this.isEdit) {
						this.$reqJsonPost('BonusSchemeDoEdit',this.formData).then(data => {
							this.$refs.uToast.show({
								message: data.msg,
								complete(){
									uni.navigateBack()
									uni.$emit('upUserGradeList')
								}
							})
						})
					}else {
						this.$reqJsonPost('BonusSchemeDoCreate', this.formData).then(data=>{
							this.$refs.uToast.show({
								message: data.msg,
								complete(){
									uni.navigateBack()
									uni.$emit('upUserGradeList')
								}
							})
						})
					}
				})
			},
			onDel(ix){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否删除?',
					success: function (res) {
						if (res.confirm) {
							_this.formData.items.splice(ix, 1)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		padding: 20rpx 20rpx 0 20rpx;
		background-color: #fff;
	}

	.pro-box {
		.seims {
			font-size: 28rpx;
			padding: 20rpx;
			color: #999;
		}

		.pro-list {
			padding: 0 20rpx;
			margin-bottom: 8rpx;
			background-color: #fff;
			.delBtn {
				border: 1px #fa436a solid;
				color: #fa436a;
				font-size: 22rpx;
				padding: 0 20rpx;
				border-radius: 6rpx;
			}
		}
	}
	.marginTop60{ margin-top: 30rpx;}

</style>
